<template>
  <div>
    <el-dialog
    :before-close="handleDialogClose"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      title="导出数据"
      :visible.sync="ExportUserStatus"
      width="40%"
      center
    >
      <el-row :gutter="10">
        <el-col style="margin-top: 20px">
          <span class="font"> 账号类型 </span>
          <el-select
            multiple
            filterable
            allow-create
            default-first-option
            v-model="value1"
            placeholder="请选择"
          >
            <el-option
              v-for="item in Role"
              :key="item.id"
              :label="item.role_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="exportCancle"
          >取消操作</el-button
        >
        <el-button type="button" class="pubBtn" @click="exportSave"
          >确定导出</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { userExport } from "@/api/admin";
export default {
  props: ["ExportUserStatus", "Role", "Statistics"],
  data() {
    return {
      bentime: "", //起始时间
      endtime: "", //结束时间
      type: "",
      category_id: "",
      province: "",
      city: "",
      value2: "",
      options: [],
      value1: "",
    };
  },
  methods: {
    exportSave() {
      userExport({
        role_id: this.value1,
      }).then((res) => {
        const blob = new Blob([res.data]);
        const fileName = "用户数据.xls";
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      });
      let ExportUserStatus = false;
      this.$emit("DetermineUsr", ExportUserStatus);
    },
    exportCancle() {
      let ExportUserStatus = false;
      this.$emit("DetermineUsr", ExportUserStatus);
    },
    handleDialogClose(){
      this.$emit("DetermineUsr", false);
    }
  },
};
</script>

<style lang="less" scoped>
.font {
  padding-right: 25px;
}
</style>
